<template>
    <div class="CustomerPhase-box">
        <div class="lable-name">客户旅程图</div>
        <el-scrollbar>
            <div class="CustomerMap">
                <div class="top-box">
                    <blockquote v-for="(item, index) in tabList" :key="item.sort" class="item-wrap">
                        <div
                            v-if="index <= tabList.length - 2"
                            :class="`item-box ${index > tabList.length - 3 ? 'active' : ''}`">
                            <img src="@/assets/customer/smile-icon.png" alt="" /><span>{{ item.name }}</span>
                            <img
                                v-if="index <= tabList.length - 3"
                                class="icon"
                                src="@/assets/customer/right-icon.png"
                                alt="" />
                        </div>
                    </blockquote>
                </div>
                <div class="bottom-box" :style="{ width: (tabList.length - 1) * 310 + 'px' }">
                    <div class="item-box">
                        <img src="@/assets/customer/smile-icon.png" alt="" /><span>{{
                            tabList[tabList.length - 1] ? tabList[tabList.length - 1].name : ''
                        }}</span>
                    </div>
                </div>
            </div>
        </el-scrollbar>

        <div class="top-title">
            <span class="lable-name">客户阶段</span>
            <div>
                <el-button v-auth="'CUSTOMER_STAGE_ADVANCED_SETTING'" plain @click="showAdvancedSetBox"
                    >高级设置</el-button
                >
                <el-button v-auth="'CUSTOMER_STAGE_ADD_CUSTOMER_PROP'" type="primary" @click="showAddConfigureFun"
                    >新增客户阶段</el-button
                >
            </div>
        </div>

        <el-table
            v-if="showTable"
            id="tableRef"
            :row-class-name="tableRowClassName"
            header-row-class-name="table_header_title"
            class="configure-table-box2"
            :data="tabList">
            <el-table-column width="55">
                <template #default="scope">
                    <img
                        v-if="scope.$index != 0 && scope.$index != tabList.length - 1"
                        src="@/assets/customer/sort-icon.png"
                        class="sortImg"
                        alt="" />
                </template>
            </el-table-column>
            <el-table-column label="序号" prop="sort" />
            <el-table-column prop="typeName" label="阶段名称">
                <template #default="scope">
                    {{ scope.row.name || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template #default="scope">
                    {{ scope.row.desc || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="自动化规则">
                <template #default="scope">
                    {{ scope.row.auto_rule_num ? scope.row.auto_rule_num + '条规则' : '--' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
                <template #default="scope">
                    <div class="table-item" :data-id="scope.$index">
                        <el-button v-auth="'CUSTOMER_STAGE_EDIT'" size="small" @click="showAddConfigureFun(scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            v-if="scope.$index != 0 && scope.$index != tabList.length - 1"
                            v-auth="'CUSTOMER_STAGE_DEL'"
                            size="small"
                            @click="delFun(scope.row)"
                            >删除</el-button
                        >
                    </div>
                </template>
            </el-table-column>
            <template #empty>
                <img class="emty_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">暂无数据</div>
            </template>
        </el-table>

        <AddBox ref="AddBoxRef" :tip="tabList[tabList.length - 1].name" @refresh="getTableList" />
        <AdvancedSet ref="AdvancedSetRef" @refresh="getTableList" />
    </div>
</template>

<script lang="ts" setup>
import AdvancedSet from './AdvancedSet.vue';
import Sortable from 'sortablejs';
import { nextTick, onMounted, ref } from 'vue';
import AddBox from './AddBox.vue';
import { stageList, stageDel, stageSourceSort } from '../../api';
import { useStore } from '@/store';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
const store = useStore();
const pageParam = { page: 1, page_size: 15 };
const AddBoxRef = ref(null);
const AdvancedSetRef = ref(null);
const showTable = ref(true);
const tabList = ref([
    { title: '新客户', id: 1, sort: 0 },
    { title: '潜在客户', id: 2, sort: 1 },
    { title: '意向购买客户', id: 3, sort: 2 },
    { title: '成单客户', id: 4, sort: 3 },
    { title: '无意向客户', id: 5, sort: 4 }
]);
const showAdvancedSetBox = () => {
    AdvancedSetRef.value.appDialog.visible = true;
    AdvancedSetRef.value.appDialog.tableList = tabList.value;
};

// 删除
const delFun = (val: any) => {
    ElMessageBox.confirm(
        `删除该阶段后，处于该阶段的客户的客户阶段将为未设置状态，自动化规则中选择该阶段的配置也将失效。您确定要删除阶段【${val.name}】吗？`,
        '删除客户阶段',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            if (!val.id) {
                ElMessage.error('当前数据异常，请稍后再试');
                getTableList();
                return;
            }
            stageDel({ cust_stage_id: val.id }).then((r: any) => {
                ElMessage.success('删除成功');
                getTableList();
            });
        })
        .catch(() => {});
};
// 新增 或 编辑
const showAddConfigureFun = (data: any) => {
    if (data && data.id) {
        AddBoxRef.value.dialogInfo.editInfo = data;
    } else {
        AddBoxRef.value.dialogInfo.editInfo = {};
    }
    AddBoxRef.value.dialogInfo.visible = true;
};
const setSortableFun = () => {
    let nowIndex;
    let copyTableList;
    nextTick(() => {
        const SortableBox = new Sortable(
            document.querySelector('#tableRef').querySelector('.el-table__body-wrapper tbody'),
            {
                animation: 100,
                sort: true,
                delay: 0,
                delayOnTouchOnly: false,
                handle: '.can-sort',
                filter: '.no-sort',
                onChoose: function (evt: any) {
                    nowIndex = evt.oldIndex;
                },
                onMove: function (evt: any, originalEvent: any) {
                    // let index = evt.related.querySelector('.table-item').getAttribute('data-id')
                    // if (index == 0 || index == tabList.value.length - 1) {
                    //   return false
                    // }
                    // return true
                },
                //
                onEnd: (evt: any) => {
                    copyTableList = JSON.parse(JSON.stringify(tabList.value));
                    const data = copyTableList.splice(evt.oldIndex, 1)[0];
                    copyTableList.splice(evt.newIndex, 0, data);
                    let next_id, pre_id;
                    if (copyTableList[evt.newIndex - 1]) {
                        pre_id = copyTableList[evt.newIndex - 1].source_id;
                    }
                    if (copyTableList[evt.newIndex + 1]) {
                        next_id = copyTableList[evt.newIndex + 1].source_id;
                    }
                    const arr: any = [];
                    copyTableList.forEach((item: any, index: number) => {
                        arr.push({ id: item.id, sort: index + 1 });
                    });
                    stageSourceSort({ sorts: arr }).then((r: any) => {
                        getTableList();
                    });
                }
            }
        );
    });
};
// 获取表格数据
const getTableList = () => {
    stageList({}).then((r: any) => {
        showTable.value = false;
        tabList.value = r;
        setTimeout(() => {
            showTable.value = true;
            nextTick(() => {
                setSortableFun();
            });
        });
    });
};
const tableRowClassName = (row: any) => {
    if (row.rowIndex == 0 || row.rowIndex == tabList.value.length - 1) {
        return 'no-sort';
    }
    return 'can-sort';
};
onMounted(() => {
    getTableList();
});
</script>

<style scoped lang="scss">
.CustomerPhase-box {
    margin-top: 6px;
    background-color: #fff;

    .lable-name {
        font-size: 14px;
        color: #33302d;
    }

    .top-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px 0;
    }

    .CustomerMap {
        border-radius: 4px;
        border: 1px solid #eaeaea;
        box-sizing: border-box;
        padding: 36px 26px;
        margin-top: 16px;

        .item-box {
            margin-right: 110px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #33302d;
            width: 200px;
            height: 36px;
            background: #fffaf9;
            text-align: center;
            line-height: 36px;
            position: relative;

            span,
            img {
                vertical-align: middle;
            }

            img {
                width: 16px;
                height: 16px;
                margin-right: 12px;
            }

            .icon {
                position: absolute;
                width: 7px;
                height: auto;
                top: 11px;
                right: -70px;
            }
        }

        .top-box {
            margin-bottom: 30px;
            white-space: nowrap;
            max-width: auto;

            .item-wrap {
                display: inline-block;
                vertical-align: middle;
            }

            .item-box::after,
            .item-box::before {
                position: absolute;
                content: '';
                left: calc(50% - 1px);
            }

            .item-box::before {
                width: 1px;
                height: 48px;
                bottom: -48px;
                background: #d8d8d8;
            }

            .item-box::after {
                width: 8px;
                height: 8px;
                background: #d8d8d8;
                border-radius: 50%;
                bottom: -50px;
                left: calc(50% - 4px);
            }

            .active::after,
            .active::before {
                display: none;
            }
        }

        .bottom-box {
            text-align: right;
            position: relative;
            max-width: auto;

            .item-box {
                display: inline-block;
            }

            &::after,
            &::before {
                position: absolute;
                content: '';
            }

            &::before {
                width: calc(100% - 460px);
                height: 1px;
                background: #d8d8d8;
                left: 100px;
                bottom: 19px;
            }

            &::after {
                border-top: 5px solid transparent;
                border-left: 10px solid #d8d8d8;
                border-bottom: 5px solid transparent;
                right: 351px;
                bottom: 15px;
            }
        }
    }

    .configure-table-box2 {
        .sortImg {
            width: 13px;
            height: 11px;
        }

        .table-item {
            display: flex;
            justify-content: flex-start;

            div {
                width: 80px;
                height: 24px;
                background: #fff;
                border-radius: 2px;
                border: 1px solid #eaeaea;
                line-height: 24px;
                margin-right: 10px;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;
                text-align: center;
                cursor: pointer;
            }
        }
    }

    .pageLimit-box {
        padding-top: 20px;
    }
}

:deep(.el-table--layout-fixed .el-table__header-wrapper tr th.el-table-fixed-column--right) {
    background-color: #f9f9f9;
}
</style>
